@import "common";

//@import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
//link 是把一个 样式文件引入的 html页面里面
body {
    min-width: 320px;
    max-width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    color: #333333;
    font-family: Arial, Helvetica, STHeiTi, sans-serif;
    background: #f2f2f2;
}

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333333;
}

div {
    box-sizing: border-box;
}

@baseFont: 50px;

header {
    display: flex;
    flex-direction: column;
    width: 15rem;
    height: (163.84rem / @baseFont);
    background: url(../images/suningbj1.png) no-repeat;

    .header-hd {
        width: 100%;
        height: (90.1rem / @baseFont);

        .container {
            position: relative;
            margin: 0 (24rem / @baseFont);
            height: (90.1rem / @baseFont);

            .back {
                position: absolute;
                left: 0;
                top: 37%;
                transform: translate(0, -50%);
                width: (43rem / @baseFont);
                height: (43rem / @baseFont);

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .title-follow {
                display: flex;
                align-items: center;
                position: absolute;
                left: (43.016rem / @baseFont);
                top: 50%;
                transform: translate(0, -50%);
                width: (512rem / @baseFont);
                height: (49.15rem / @baseFont);

                .title2 {
                    width: (180.6rem / @baseFont);
                    height: (43rem / @baseFont);
                }

                a {
                    position: relative;
                    margin-left: (18.432rem / @baseFont);
                    width: (114.69rem / @baseFont);
                    height: (49.15rem / @baseFont);

                    .attention {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;

                    }
                }
            }

            .cart-area {
                position: absolute;
                right: (67.592rem / @baseFont);
                top: 37%;
                transform: translate(0, -50%);
                width: (43rem / @baseFont);
                height: (43rem / @baseFont);

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .searchBnt {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translate(0, -50%);
                width: (43rem / @baseFont);
                height: (43rem / @baseFont);
            }
        }
    }

    .header-bd {
        flex: 1;


        .top-search {
            margin: 0 (24rem / @baseFont);
            height: (59.84rem / @baseFont);
            margin-top: (5rem / @baseFont);

            .search {
                overflow: hidden;
                width: 100%;
                height: 100%;
                background-color: #fff;
                border-radius: (12rem / @baseFont);

                .search-btn {
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 100%;

                    .search-icon {
                        position: absolute;
                        left: (25rem / @baseFont);
                        top: 50%;
                        transform: translate(0, -50%);
                        width: (38rem / @baseFont);
                        height: (38rem / @baseFont);
                    }

                    .search-word {
                        position: absolute;
                        left: (75rem / @baseFont);
                        top: 50%;
                        transform: translate(0, -50%);
                        font-size: (26.624rem / @baseFont);
                    }

                }
            }
        }

    }
}

.lazying {
    width: 15rem;
    height: (286.71rem / @baseFont);

    .bannerbox {
        display: flex;
        align-items: center;
        margin: 0 (24rem / @baseFont);
        height: 100%;
        background-color: pink;

        .swipe {
            position: relative;
            width: 100%;
            height: (281rem / @baseFont);
            border-radius: (20rem / @baseFont);
            overflow: hidden;


            .items {
                position: absolute;
                left: -100%;
                top: 0;
                height: (281rem / @baseFont);
                display: flex;
                width: 1100%;

                li {
                    a {
                        img {
                            width: (702rem / @baseFont);
                            height: (280rem / @baseFont);
                        }
                    }
                }

            }

            .cricle {
                display: flex;
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                bottom: (18rem / @baseFont);

                li {
                    margin-right: (4.096rem / @baseFont);
                    width: (12.288rem / @baseFont);
                    height: (6.144rem / @baseFont);
                    background-color: #ccc;
                    border-radius: (3.072rem / @baseFont);
                }

                .current {
                    background-color: red;
                }

            }

        }
    }

}